<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>出差报销单</title>
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/my/application/travel_expense.css" />
    <script src="../../../script/widget/include.js"></script>
    <style>
        .img-div {
            padding: 0.3rem;
            /*width: 3rem;*/
            /*height: 3rem;*/
        }
        .img_div{
            display : inline-block;
            position : relative;
        }
        .img_div .delete{
            position : absolute;
            top : -5px;
            right : -5px;
            color: red;
            text-align: center;
            cursor: pointer;
            border-radius: 20px;
            width : 20px;
            height : 20px;
            line-height: 20px;
            background:#DDDDDD;
        }

        .img-div-add {
            height: 3rem;
            width: 3rem;
            position: relative;
        }

        .forminput {
            text-align: right;
            padding-right: .8rem !important;
        }
    </style>
</head>

<body style="cursor: pointer">
    <!--  头部 -->

    <ul class="aui-list aui-form-list" style="padding: 0;">
        <!--申请单详情start-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(一)</span>出差报销单详情</div>
        </li>
        <li class="aui-list-item" >
            <div class="aui-list-item-inner" id="picker2">
                <div class="aui-list-item-title">请选择</div>
                <div class="aui-list-item-right" style="max-width: 55%;">
                    <div class="aui-list-item-label-icon"><span style="color:#3CB0D6;"></span><i class="aui-iconfont aui-icon-right" style="color:#B6B6B6;font-size: 0.5rem;"></i></div>
                </div>
            </div>
        </li>
        <div class="detail" id="order_list" style="margin-bottom: 0.6rem;">
        </div>
        <!--申请单详情end-->
        <!--出行时间start-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(二)</span>出行时间</div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title">出行开始时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon start-time">
                        <input type="text" placeholder="yyyy-MM-dd" id="my-startDate" readonly  class="forminput" style="color:#56B9DB;">
                    </div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title ">出行结束时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time">
                        <input type="text" placeholder="yyyy-MM-dd" id="my-endDate" readonly  class="forminput" style="color:#56B9DB;">
                    </div>
                </div>
            </div>
        </li>
        <!--出行时间end-->
        <!--报销单信息录入start-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(三)</span>报销单信息录入</div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner revocation" style="">
                <div class="aui-list-item-title " style="color:#3CB0D6;font-size: 0.7rem;">报销明细<span style="letter-spacing: 5px;margin-left: 5px;">(1)</span></div>
            </div>
        </li>
        <li class="aui-list-item detail_price">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title">报销金额<span style="letter-spacing: 5px;margin-left: 5px;">(元)</span></div>
                <div class="aui-list-item-right">
                    <input type="number" placeholder="请输入数字" style="font-size: 0.7rem;width: 4rem;color: #ccc;" class="calculate_price">
                </div>
            </div>
        </li>
        <li class="aui-list-item" style="padding-bottom: 5px;">
            <div class="" style="width: 100%;">
                <span class="pay_detail">费用明细</span>
                <br>
                <div style="width:100%; ">
                    <textarea style="width:100%;border: none; " placeholder="请输入费用明细描述" style="color:#ccc;"></textarea>
                </div>
            </div>
        </li>
        <li class="aui-list-item" style="padding-bottom: 1rem;">
            <div>
                <span class="pay_detail">图片</span>
                <br>
                <div class="img-div-add">
                    <div class="aui-iconfont aui-icon-plus" style="background: #F6F6F6;padding: 1rem;width: 3rem;height: 3rem;display: inline-block;text-align: center;"></div>
                    <input type="file" accept="image/*" class="upload_img inputstyle" style="width: 3rem;height: 3rem;cursor: pointer;font-size: 30px;outline: medium none;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; left:0px;top: 0px;">
                </div>
            </div>
        </li>
        <!--报销单信息录入end-->
        <span class="add_expendse" style="background: white;">
            +增加报销明细
        </span>
        <!--报销总金额start-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(五)</span>报销总额</div>
        </li>
        <div class="detail" style="margin-bottom: 0.6rem;">
            <ul class="some_bottom">
                <li>
                    <span class="detail-left">订单总额(元)</span>
                    <span class="detail-right" id="order_price">0</span>
                </li>
                <li>
                    <span class="detail-left">报销明细总额(元)</span>
                    <span class="detail-right" id="detail_price">0</span>
                </li>
                <li>
                    <span class="detail-left" style="color: #636363;">出差报销总额(元)</span>
                    <span class="detail-right" id="total_price">0</span>
                </li>
            </ul>
        </div>
        <!--报销总金额end-->
        <!--审批人start-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div style="width: 100%;">
                <span style="letter-spacing: 5px;">(六)</span> 审批人
            </div>
        </li>
        <div class="detail">
            <ul class="some_bottom">
                <li id="picker1">
                    <span class="detail-left" style="color: #000000;font-size: 0.75rem;">审批人</span>
                    <span class="detail-right"> <i class="aui-iconfont aui-icon-right" style="color:#B6B6B6;font-size: 0.5rem;float: right;"></i></span>
                </li>
                <li style="min-height: 2rem;">
                    <span class="detail-left" style="width: 100%;display: inline-block;">
                        <ul class="expense_person">
                        </ul>
                    </span>

                </li>

            </ul>
        </div>
        <!--审批人end-->
        <div class="" style="width: 100%;float: left;padding: 0.75rem;" id="submitData">
            <div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm" style="width: 100%;background-color:#3CB0D6;">
                提交
            </div>
        </div>

    </ul>
    <div style="height: 8rem;"></div>
</body>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/aui/aui-toast.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/extend/picker.min.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/widget/mobiscroll/mobiscroll.custom-3.0.0-beta6.min.js"></script>
<script type="text/javascript" src="../../../service/index/expense/expenseAdd.js"></script>
<!-- 模板start -->
<script id="expendse_tpl" type="text/x-dot-template">
	<li class="aui-list-item">
		<div class="aui-list-item-inner revocation" style="">
			<div class="aui-list-item-title "style="color:#3CB0D6;font-size: 0.7rem;">报销明细<span style="letter-spacing: 5px;margin-left: 5px;" class="detail-sort">({{= it }})</span></div>
			<div class="aui-list-item-right">
				<div class="aui-list-item-label-icon tag-del"><span style="color:#3CB0D6;">删除</span></div>
			</div>
		</div>
	</li>
	<li class="aui-list-item detail_price">
		<div class="aui-list-item-inner " style="">
			<div class="aui-list-item-title">报销金额<span style="letter-spacing: 5px;margin-left: 5px;">(元)</span></div>
			<div class="aui-list-item-right">
					<input type="text" placeholder="请输入数字" style="font-size: 0.7rem;width: 4rem;color: #ccc;"  class="calculate_price">
			</div>
		</div>
	</li>
	<li class="aui-list-item" style="padding-bottom: 5px;">
		<div class="" style="width: 100%;">
			<span class="pay_detail">费用明细</span>
			<br>
			<div style="width:100%; ">
				<textarea style="width:100%;border: none; " placeholder="请输入费用明细描述" style="color:#ccc;"></textarea>
			</div>
		</div>
	</li>
	<li class="aui-list-item" style="padding-bottom: 1rem;">
		<div class="" style="">
			<h2 class="pay_detail">图片</h2>
			<div class="img-div-add">
				<div class="aui-iconfont aui-icon-plus" style="background: #F6F6F6;padding: 1rem;width: 3rem;height: 3rem;display: inline-block;text-align: center;"></div>
				<input type="file" accept="image/*" class="upload_img inputstyle" style="width: 10rem;height: 6rem;cursor: pointer;font-size: 30px;outline: medium none;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; left:0px;top: 0px;">
			</div>
		</div>
	</li>
</script>
<!-- 图片模板 -->
<script id="img_tpl" type="text/x-dot-template">
	<div class='img-div aui-col-xs-4'>
		<div class="img_div">
			<img src="{{= it }}" style="max-width: 100%;max-height: 100%;margin: 0 auto;vertical-align: middle;"/>
			<div class="delete">x</div>
		</div>
	</div>
</script>
<!-- 审批人模板 -->
<script id="person_tpl" type="text/x-dot-template">
	<li data-val="{{= it.val }}">
		<label class="u_name">{{= it.text }}</label>
		<span class="del_travel_person">x</span>
	</li>
</script>
<script id="order_tpl" type="text/x-dot-template">
	{{ for(var prop in it) { }}
		{{ if (it[prop]['product_id'] == 1 ) { }}
	<ul style="border-bottom: 1px solid #dddddd;display: none;" class="ordertype{{= it[prop]['product_id'] }} order_plane" data-price="{{= it[prop]['order_total_price'] }}" data-id="{{= it[prop]['order_id'] }}" data-paycode="{{= it[prop]['pay_code'] }}">
		<li>
			<span class="detail-left">订单号</span>
			<span class="detail-right">{{= it[prop]['user_orderid'] }}</span>
		</li>
		<li>
			<span class="detail-left">订单总价</span>
			<span class="detail-right">￥{{= it[prop]['order_total_price'] }}</span>
		</li>
		<li>
			<span class="detail-left">订单类型</span>
			<span class="detail-right">飞机票</span>
		</li>
		<li>
			<span class="detail-left">航班号</span>
			<span class="detail-right">{{= it[prop]['flight_number'] }}</span>
		</li>
		<li>
			<span class="detail-left">起飞日期</span>
			<span class="detail-right">{{= it[prop]['take_off_date'] }}{{= it[prop]['take_off_time'] }}</span>
			<input type="hidden" name="travel_start_time" value="{{= it[prop]['travel_start_time'] }}">
			<input type="hidden" name="travel_end_time" value="{{= it[prop]['travel_end_time'] }}">
		</li>
		<li>
			<span class="detail-left">预定时间</span>
			<span class="detail-right">{{= it[prop]['create_time'] }}</span>
		</li>
		<li>
			<span class="detail-left">支付类型</span>
			<span class="detail-right">{{= it[prop]['pay_name'] }}</span>
		</li>
	</ul>
		{{ }else if (it[prop]['product_id'] == 3 ) { }}
		<ul style="border-bottom: 1px solid #dddddd;display: none;" class="ordertype{{= it[prop]['product_id'] }} order_hotel" data-price="{{= it[prop]['order_total_price'] }}" data-id="{{= it[prop]['order_id'] }}" data-paycode="{{= it[prop]['pay_code'] }}">
			<li>
				<span class="detail-left">订单号</span>
				<span class="detail-right">{{= it[prop]['user_orderid'] }}</span>
			</li>
			<li>
				<span class="detail-left">订单总价</span>
				<span class="detail-right">￥{{= it[prop]['order_total_price'] }}</span>
			</li>
		<li>
			<span class="detail-left">订单类型</span>
			<span class="detail-right">酒店</span>
		</li>
		<li>
			<span class="detail-left">酒店名称</span>
			<span class="detail-right">{{= it[prop]['hotel_name'] }}</span>
		</li>
		<li>
			<span class="detail-left">入住时间</span>
			<span class="detail-right">{{= it[prop]['arrival_time'] }}-{{= it[prop]['departure_time']}}</span>
			<input type="hidden" name="travel_start_time" value="{{= it[prop]['travel_start_time'] }}">
			<input type="hidden" name="travel_end_time" value="{{= it[prop]['travel_end_time'] }}">
		</li>
			<li>
				<span class="detail-left">预定时间</span>
				<span class="detail-right">{{= it[prop]['create_time'] }}</span>
			</li>
			<li>
				<span class="detail-left">支付类型</span>
				<span class="detail-right">{{= it[prop]['pay_name'] }}</span>
			</li>
		</ul>
		{{ }else if (it[prop]['product_id'] == 5 ) { }}
			<ul style="border-bottom: 1px solid #dddddd;display: none;" class="ordertype{{= it[prop]['product_id'] }} order_train" data-price="{{= it[prop]['order_total_price'] }}" data-id="{{= it[prop]['order_id'] }}" data-paycode="{{= it[prop]['pay_code'] }}">
				<li>
					<span class="detail-left">订单号</span>
					<span class="detail-right">{{= it[prop]['user_orderid'] }}</span>
				</li>
				<li>
					<span class="detail-left">订单总价</span>
					<span class="detail-right">￥{{= it[prop]['order_total_price'] }}</span>
				</li>
		<li>
			<span class="detail-left">订单类型</span>
			<span class="detail-right">火车票</span>
		</li>
		<li>
			<span class="detail-left">车次</span>
			<span class="detail-right">{{= it[prop]['train_code'] }}</span>
		</li>
		<li>
			<span class="detail-left">发车时间</span>
			<span class="detail-right">{{= it[prop]['train_date'] }}{{= it[prop]['train_start_time'] }}</span>
			<input type="hidden" name="travel_start_time" value="{{= it[prop]['travel_start_time'] }}">
			<input type="hidden" name="travel_end_time" value="{{= it[prop]['travel_end_time'] }}">
		</li>
				<li>
					<span class="detail-left">预定时间</span>
					<span class="detail-right">{{= it[prop]['create_time'] }}</span>
				</li>
				<li>
					<span class="detail-left">支付类型</span>
					<span class="detail-right">{{= it[prop]['pay_name'] }}</span>
				</li>
			</ul>
		{{ } }}
	{{ } }}
</script>
<!-- 模板end -->

<script>
    apiready = function() {
        api.parseTapmode();
		new expenseAdd();
    };
</script>

</html>
